<template>
  <div :class="['input-field-container', {'selected': isSelected }]" @click="$emit('changeItemId', item.id)">
    <div v-handle style="text-align:center;padding-top:8px;cursor:crosshair;" v-show="isSelected"><i class="el-icon-rank"></i></div>
    <div class="header-div">
      <h3 class="title-div" v-show="!showTitleInput" @click="showTitleInput = true">{{ item.title }}</h3>
      <input type="text" class="title-div title-input" v-model="editTitle" v-show="showTitleInput" @blur="editTitleComplete">
    </div>
    <slot></slot>
    <div class="footer-div">
     <div class="checkboxes-div">
      <el-checkbox-group v-model="checkList" @change="$emit('setItemOptions', checkList)">
        <el-checkbox v-for="item in checkboxList" :label="item.label" :key="item.id"></el-checkbox>
      </el-checkbox-group>
      <div class="operate-btns">
        <span class="operate-btn" title="删除" @click="$emit('deleteItem', item.id)">
          <i class="el-icon-delete"></i>
        </span>
        <span class="operate-btn" title="复制" @click="$emit('cloneItem', item.id)">
          <i class="el-icon-tickets"></i>
        </span>
      </div>
     </div>
    </div>
  </div>
</template>

<script>
import {HandleDirective} from 'vue-slicksort'
export default {
  directives: {handle: HandleDirective},
  props: {
    item: Object,
    isSelected: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      checkboxList: [
        {
          label: '必填',
          id: '1'
        },
        {
          label: '不能重复',
          id: '2'
        },
        {
          label: '隐藏',
          id: '3'
        },
        {
          label: '缓存填写内容',
          id: '4'
        }
      ],
      checkList: this.item.options,
      editTitle: this.item.title,
      showTitleInput: false
    }
  },
  methods: {
    editTitleComplete () {
      this.showTitleInput = false // 编辑完成
      this.$emit('editTitle', this.editTitle)
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
